$(function () {
    //1、设置颜色和背景
    $('.contain h2').css({ 'background-color': 'darkblue', color: '#ffffff' })
    //2、在gameList首位添加一行
    let li = $('<li>在gameList首位添加一行</li>')
    $('.gameList').prepend(li)
    //3、在gameList末尾添加一行
    li = $('<li>在gameList末尾添加一行</li>')
    $('.gameList').append(li)
    //4、在<li> 姚明：北京申冬奥是个非常棒的机会！加油！</li>之前添加一行
    li = $('<li>在北京申冬奥前添加一行</li>')
    li.css('background-color', '#ddd')
    let yao
    let list = $('li')
    let n = list.length
    for (let i = 0; i < n; i++) {
        let str = $(list[i]).text()
        if (str.indexOf('姚明') !== -1) {
            // list[i]不是jq对象,转换成jq对象
            yao = $(list[i])
            break
        }
    }
    //在for循环中的item this list[i] 都是原生的js对象，不能直接使用jquery的函数
    //一定要使用时，可以转换为jq对象，this===>$(this) item-->$(item) list[i]-->$(list[i])
    console.log(yao)
    //yao的前面时li
    yao.before(li)
    //5、在<li> 姚明：北京申冬奥是个非常棒的机会！加油！</li>之后添加一行
    li = $('<li>在北京申冬奥后添加一行</li>')
    li.css('background-color', '#ddd')
    yao.after(li)
    //6、最后一个li没有边框
    $('.gameList>li:last').css('border', 'none')
    //7、清空‘姚明’li的内容
    yao.empty()
    //8、找到第3个li进行删除操作
    //$('li:eq(2)').detach()
    //9、a.replaceWith(b) 用b替换a
    li = $('<li>你喜欢哪些冬季运动呢？</li>')
    //$('li:eq(2)').replaceWith(li)
    //10 b.replaceAll(a) 用b替换a
    li.replaceAll($('li:eq(2)'))
    //绑定事件
    $('.gameList>li:first').click(function () {
        alert('第一个li被点击l')
    })
    //11、clone操作，clone(true)深克隆会复制事件和样式,默认是false
    let firstLi = $('.gameList>li:first').clone(true)
    $('.gameList').append(firstLi)
    //12、获得元素的属性
    let src = $('.contain>div>img').attr('src')
    console.log(src)
    //13、设置属性值
    $('.contain>div>img').click(function () {
        $(this).attr({
            src: '../img/win.jpg',
            alt: '北京冬奥会',
            title: '北京冬奥会',
        })
    })
    //14、点击h2删除img元素的title属性
    $('.contain h2').click(function () {
        $('.contain>div>img').removeAttr('title')
    })

    //15、获得ul的子元素集合 类似find()
    let collection = $('.gameList').children()
    collection.each(function () {
        console.log(this)
    })
    //16、找指定的子元素 find(".gameList")
    let ul = $('.contain').children('.gameList')
    console.log(ul)
    //17、next()
    let h2 = $('.contain div:first').next()
    console.log(h2.text())
    //18、prev()
    let div = h2.prev()
    console.log(div.html())
    //19、siblings()
    let otherLi = $('.gameList>li:eq(1)').siblings()
    otherLi.css('color', 'red')
})